<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>客户管理</title>
    <!-- 引入css样式文件 -->
    <!-- Bootstrap Core CSS -->
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <!-- MetisMenu CSS -->
    <link th:href="@{/css/metisMenu.min.css}" rel="stylesheet"/>
    <!-- DataTables CSS -->
    <link th:href="@{/css/dataTables.bootstrap.css}" rel="stylesheet"/>
    <!-- Custom CSS -->
    <link th:href="@{/css/sb-admin-2.css}" rel="stylesheet"/>
    <!-- Custom Fonts -->
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/ css/boot-crm.css}" rel="stylesheet" type="text/css"/>
</head>
<body>

<div id="wrapper">

    <div th:insert="~{topbar :: topbar}" ></div>
    <!-- 客户列表查询部分  start-->
    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">客户管理</h1>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->
        <div class="panel panel-default">
            <div class="panel-body">
                <form class="form-inline" method="get"
                      action="/customer/list">
                    <div class="form-group">
                        <label for="customerName">客户名称</label>
                        <input type="text" class="form-control" id="customerName"
                               name="custName"/>
                    </div>
                    <div class="form-group">
                        <label for="customerFrom">客户来源</label>
                        <select class="form-control" id="customerFrom" name="custSource">
                            <option value="">--请选择--</option>
                            <div th:each="customerSource:${customerSources}">
                                <option th:value="${customerSource.dictId}"
                                        th:text="${customerSource.dictItemName}"
                                >
                                    ${item.dict_item_name }
                                </option>
                            </div>


                        </select>
                    </div>
                    <div class="form-group">
                        <label for="custIndustry">所属行业</label>
                        <select class="form-control" id="custIndustry" name="custIndustry">
                            <option value="">--请选择--</option>
                            <div th:each="customerIndustry:${customerIndustries}">
                                <option th:value="${customerIndustry.dictId}"
                                        th:text="${customerIndustry.dictItemName}"
                                >
                                    ${item.dict_item_name }
                                </option>
                            </div>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="custLevel">客户级别</label>
                        <select class="form-control" id="custLevel" name="custLevel">
                            <option value="">--请选择--</option>
                            <div th:each="customerLevel:${customerLevels}">
                                <option th:value="${customerLevel.dictId}" th:text="${customerLevel.dictItemName}"
                                >
                                    ${item.dict_item_name }
                                </option>
                            </div>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary">查询</button>
                </form>
            </div>
        </div>
        <a href="#" class="btn btn-primary" data-toggle="modal"
           data-target="#newCustomerDialog" onclick="clearCustomer()">新建</a>
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">客户信息列表</div>
                    <!-- /.panel-heading -->
                    <table class="table table-bordered table-striped">
                        <thead>
                        <tr>
                            <th>编号</th>
                            <th>客户名称</th>
                            <th>客户来源</th>
                            <th>客户所属行业</th>
                            <th>客户级别</th>
                            <th>固定电话</th>
                            <th>手机</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <div th:each="customerInfo:${customerInfos}">
                            <tr>
                                <td th:text="${customerInfo.customer.custId}"></td>
                                <td th:text="${customerInfo.customer.custName}"></td>
                                <td th:text="${customerInfo.custSource}"></td>
                                <td th:text="${customerInfo.custIndustry}"></td>
                                <td th:text="${customerInfo.custLevel}"></td>
                                <td th:text="${customerInfo.customer.custPhone}"></td>
                                <td th:text="${customerInfo.customer.custMobile}"></td>
                                <td>
                                    <a href="#" class="btn btn-primary btn-xs" data-toggle="modal"
                                       data-target="#customerEditDialog"
                                       th:onclick="editCustomer([[${customerInfo.customer.custId}]])">修改</a>
                                    <a href="#" class="btn btn-danger btn-xs" th:onclick="deleteCustomer([[${customerInfo.customer.custId}]])">删除</a>
                                </td>
                            </tr>
                        </div>
                        </tbody>
                    </table>
                    <div class="col-md-12 text-right">
                        <ujn:page url="${pageContext.request.contextPath }/customer/list.action"/>
                    </div>
                    <!-- /.panel-body -->
                </div>
                <!-- /.panel -->
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <nav aria-label="Page navigation">
            <ul class="pagination" th:if="${pre!=null}">
                <li>
                    <a th:href="@{/customer/list(custName=${name},custIndustry=${industry},custLevel=${level},custSource=${source},currentPage=1)}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li>
                    <a th:href="@{/customer/list(custName=${name},custIndustry=${industry},custLevel=${level},custSource=${source},currentPage=${pre})}" aria-label="Previous">
                        <span aria-hidden="true">&lt;</span>
                    </a>
                </li>

                <li th:class="${num==current?'active':''}" th:each="num, numStat : ${#numbers.sequence(start,total)}"><a th:href="@{/customer/list(custName=${name},custIndustry=${industry},custLevel=${level},custSource=${source},currentPage=${num})}" th:text="${num}" ></a></li>
                <li>
                    <a th:href="@{/customer/list(custName=${name},custIndustry=${industry},custLevel=${level},custSource=${source},currentPage=${next})}" aria-label="Previous">
                        <span aria-hidden="true">&gt;</span>
                    </a>
                </li>
                <li>
                    <a th:href="@{/customer/list(custName=${name},custIndustry=${industry},custLevel=${level},custSource=${source},currentPage=${final})}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
    <!-- 客户列表查询部分  end-->
</div>
<!-- 创建客户模态框 -->
<div class="modal fade" id="newCustomerDialog" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" >
                    <span aria-hidden="true" onclick="close()">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">新建客户信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="new_customer_form">
                    <div class="form-group">
                        <label for="new_customerName" class="col-sm-2 control-label">
                            客户名称
                        </label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="new_customerName" placeholder="客户名称"
                                   name="custName"/>
                        </div>
                    </div>
                    <p id="message1" align="center" style="color: red"></p>
                    <div class="form-group">
                        <label for="customerFrom" class="col-sm-2 control-label">客户来源</label>
                        <div class="col-sm-10">

                            <select class="form-control" id="customerFrom" name="custSource">
                                <option value="" id="op1">--请选择--</option>
                                <div th:each="customerSource:${customerSources}">
                                    <option th:value="${customerSource.dictId}" th:text="${customerSource.dictItemName}"
                                    ></option>

                                </div>
                            </select>
                        </div>
                    </div>
                    <p id="message2" align="center" style="color: red"></p>
                    <div class="form-group">
                        <label for="custIndustry" class="col-sm-2 control-label">所属行业</label>
                        <div class="col-sm-10">

                            <select class="form-control" id="custIndustry" name="custIndustry">
                                <option value="" id="op2">--请选择--</option>
                                <div th:each="customerIndustry:${customerIndustries}">
                                    <option th:value="${customerIndustry.dictId}"
                                            th:text="${customerIndustry.dictItemName}"
                                    ></option>
                                </div>
                            </select>
                        </div>
                        </div>
                    <p id="message3" align="center" style="color: red"></p>
                        <div class="form-group">
                            <label for="custLevel" class="col-sm-2 control-label">客户级别</label>
                            <div class="col-sm-10">
                                <select class="form-control" id="custLevel" name="custLevel">
                                    <option value="" id="op3">--请选择--</option>
                                    <div th:each="customerLevel:${customerLevels}">
                                        <option th:value="${customerLevel.dictId}"
                                                th:text="${customerLevel.dictItemName}"
                                        >
                                            ${item.dict_item_name }
                                        </option>
                                    </div>
                                </select>
                            </div>
                        </div>
                    <p id="message4" align="center" style="color: red"></p>
                        <div class="form-group">
                            <label for="new_linkMan" class="col-sm-2 control-label">联系人</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="new_linkMan" placeholder="联系人"
                                       name="custLinkman"/>
                            </div>
                        </div>
                    <p id="message5" align="center" style="color: red"></p>
                        <div class="form-group">
                            <label for="new_phone" class="col-sm-2 control-label">固定电话</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="new_phone" placeholder="固定电话"
                                       name="custPhone"/>
                            </div>
                        </div>
                    <p id="message6" align="center" style="color: red"></p>
                        <div class="form-group">
                            <label for="new_mobile" class="col-sm-2 control-label">移动电话</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="new_mobile" placeholder="移动电话"
                                       name="custMobile"/>
                            </div>
                        </div>
                    <p id="message7" align="center" style="color: red"></p>
                        <div class="form-group">
                            <label for="new_zipcode" class="col-sm-2 control-label">邮政编码</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="new_zipcode" placeholder="邮政编码"
                                       name="custZipcode"/>
                            </div>
                        </div>
                    <p id="message8" align="center" style="color: red"></p>
                        <div class="form-group">
                            <label for="new_address" class="col-sm-2 control-label">联系地址</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="new_address" placeholder="联系地址"
                                       name="custAddress"/>
                            </div>
                        </div>
                    <p id="message9" align="center" style="color: red"></p>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="createCustomer()">创建客户</button>
            </div>
        </div>
    </div>
</div>
<!-- 修改客户模态框 -->
<div class="modal fade" id="customerEditDialog" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" >
                    <span aria-hidden="true" onclick="close1()">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">修改客户信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="edit_customer_form">
                    <input type="hidden" id="edit_cust_id" name="custId"/>
                    <div class="form-group">
                        <label for="edit_customerName" class="col-sm-2 control-label">客户名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="edit_customerName" placeholder="客户名称"
                                   name="custName"/>
                        </div>
                    </div>
                    <p id="mess1" align="center" style="color: red"></p>
                    <div class="form-group">
                        <label for="customerFrom" class="col-sm-2 control-label">客户来源</label>
                        <div class="col-sm-10">

                            <select class="form-control" id="edit_customerFrom" name="custSource">
                                <option value="" id="oop1">--请选择--</option>
                                <div th:each="customerSource:${customerSources}">
                                    <option th:value="${customerSource.dictId}" th:text="${customerSource.dictItemName}"
                                    >
                                    </option>
                                </div>


                            </select>

                        </div>
                    </div>
                    <p id="mess2" align="center" style="color: red"></p>
                    <div class="form-group">
                        <label for="custIndustry" class="col-sm-2 control-label">所属行业</label>
                        <div class="col-sm-10">

                            <select class="form-control" id="edit_custIndustry" name="custIndustry">
                                <option value="" id="oop2">--请选择--</option>
                                <div th:each="customerIndustry:${customerIndustries}">
                                    <option th:value="${customerIndustry.dictId}"
                                            th:text="${customerIndustry.dictItemName}"
                                    >
                                        ${item.dict_item_name }
                                    </option>
                                </div>
                            </select>


                        </div>
                    </div>
                    <p id="mess3" align="center" style="color: red"></p>
                    <div class="form-group">
                        <label for="custLevel" class="col-sm-2 control-label">客户级别</label>
                        <div class="col-sm-10">

                            <select class="form-control" id="edit_custLevel" name="custLevel">
                                <option value="" id="oop3">--请选择--</option>
                                <div th:each="customerLevel:${customerLevels}">
                                    <option th:value="${customerLevel.dictId}" th:text="${customerLevel.dictItemName}"
                                    >
                                        ${item.dict_item_name }
                                    </option>
                                </div>
                            </select>


                        </div>
                    </div>
                    <p id="mess4" align="center" style="color: red"></p>
                    <div class="form-group">
                        <label for="edit_linkMan" class="col-sm-2 control-label">联系人</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="edit_linkMan" placeholder="联系人"
                                   name="custLinkman"/>
                        </div>
                    </div>
                    <p id="mess5" align="center" style="color: red"></p>
                    <div class="form-group">
                        <label for="edit_phone" class="col-sm-2 control-label">固定电话</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="edit_phone" placeholder="固定电话"
                                   name="custPhone"/>
                        </div>
                    </div>
                    <p id="mess6" align="center" style="color: red"></p>
                    <div class="form-group">
                        <label for="edit_mobile" class="col-sm-2 control-label">移动电话</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="edit_mobile" placeholder="移动电话"
                                   name="custMobile"/>
                        </div>
                    </div>
                    <p id="mess7" align="center" style="color: red"></p>
                    <div class="form-group">
                        <label for="edit_zipcode" class="col-sm-2 control-label">邮政编码</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="edit_zipcode" placeholder="邮政编码"
                                   name="custZipcode"/>
                        </div>
                    </div>
                    <p id="mess8" align="center" style="color: red"></p>
                    <div class="form-group">
                        <label for="edit_address" class="col-sm-2 control-label">联系地址</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="edit_address" placeholder="联系地址"
                                   name="custAddress"/>
                        </div>
                    </div>
                    <p id="mess9" align="center" style="color: red"></p>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="updateCustomer()">保存修改</button>
            </div>
        </div>
    </div>
</div>
<!-- 引入js文件 -->
<!-- jQuery -->
<script th:src="@{/js/jquery-1.11.3.min.js}"></script>
<!-- Bootstrap Core JavaScript -->
<script th:src="@{/js/bootstrap.min.js}"></script>
<!-- Metis Menu Plugin JavaScript -->
<script th:src="@{/js/metisMenu.min.js}"></script>
<!-- DataTables JavaScript -->
<script th:src="@{/js/jquery.dataTables.min.js}"></script>
<script th:src="@{/js/dataTables.bootstrap.min.js}"></script>
<!-- Custom Theme JavaScript -->
<script th:src="@{/js/sb-admin-2.js}"></script>
<!-- 编写js代码 -->
<script type="text/javascript">
    //清空新建客户窗口中的数据
    function clearCustomer() {
        $("#new_customerName").val("");
        $("#new_customerFrom").val("")
        $("#new_custIndustry").val("")
        $("#new_custLevel").val("")
        $("#new_linkMan").val("");
        $("#new_phone").val("");
        $("#new_mobile").val("");
        $("#new_zipcode").val("");
        $("#new_address").val("");
    }

    // 创建客户
    function createCustomer() {
        var new_customerName = $("#new_customerName").val();
        var new_linkMan=$("#new_linkMan").val();
        var new_phone=$("#new_phone").val();
        var new_mobile=$("#new_mobile").val();
        var new_zipcode=$("#new_zipcode").val();
        var new_address=$("#new_address").val();
        if(new_customerName==""){
            $("#message1").text("客户名称不能为空！");
            return false;
        }
        if($("#op1").is(":checked")){
            $("#message2").text("客户来源不能不选择！");
            return false;
        }
        if($("#op2").is(":checked")){
            $("#message3").text("所属行业不能不选择！");
            return false;
        }
        if($("#op3").is(":checked")){
            $("#message4").text("客户级别不能不选择！");
            return false;
        }
        if(new_linkMan==""){
            $("#message5").text("联系人不能为空！");
            return false;
        }
        if(new_phone==""){
            $("#message6").text("固定电话不能为空！");
            return false;
        }
        if(new_mobile==""){
            $("#message7").text("移动电话不能为空！");
            return false;
        }
        if(new_zipcode==""){
            $("#message8").text("邮政编码不能为空！");return false;

        }
        if(new_address==""){
            $("#message9").text("联系地址不能为空！");return false;
        }
        $.post("/customer/create",
            $("#new_customer_form").serialize(), function (data) {
                if (data == "OK") {
                    alert("客户创建成功！");
                    window.location.reload();
                } else {
                    alert("客户创建失败！");
                    window.location.reload();
                }
            });
    }

    // 通过id获取修改的客户信息
    function editCustomer(id) {
        $.ajax({
            type: "get",

            url: "/customer/getCustomerById",

            data: {"id": id},
            success: function (data) {
                $("#edit_cust_id").val(data.custId);
                $("#edit_customerName").val(data.custName);
                $("#edit_customerFrom").val(data.custSource)
                $("#edit_custIndustry").val(data.custIndustry)
                $("#edit_custLevel").val(data.custLevel)
                $("#edit_linkMan").val(data.custLinkman);
                $("#edit_phone").val(data.custPhone);
                $("#edit_mobile").val(data.custMobile);
                $("#edit_zipcode").val(data.custZipcode);
                $("#edit_address").val(data.custAddress);

            }
        });
    }
    function close(){
        $("#message1").text("");
        $("#message2").text("");
        $("#message3").text("");
        $("#message4").text("");
        $("#message5").text("");
        $("#message6").text("");
        $("#message7").text("");
        $("#message8").text("");
        $("#message9").text("");
    }
    function close1(){
        $("#mess1").text("");
        $("#mess2").text("");
        $("#mess3").text("");
        $("#mess4").text("");
        $("#mess5").text("");
        $("#mess6").text("");
        $("#mess7").text("");
        $("#mess8").text("");
        $("#mess9").text("");
    }
    // 执行修改客户操作
    function updateCustomer() {
        if($("#edit_customerName").val()==""){
            $("#mess1").text("客户名称不能为空！");
            return false;
        }
        if($("#oop1").is(":checked")){
            $("#mess2").text("客户来源不能不选择！");
            return false;
        }
        if($("#oop2").is(":checked")){
            $("#mess3").text("所属行业不能不选择！");
            return false;
        }
        if($("#oop3").is(":checked")){
            $("#mess4").text("客户级别不能不选择！");
            return false;
        }
        if( $("#edit_linkMan").val()==""){
            $("#mess5").text("联系人不能为空！");
            return false;
        }
        if($("#edit_phone").val()==""){
            $("#mess6").text("固定电话不能为空！");
            return false;
        }
        if($("#edit_mobile").val()==""){
            $("#mess7").text("移动电话不能为空！");
            return false;
        }
        if($("#edit_zipcode").val()==""){
            $("#mess8").text("邮政编码不能为空！");return false;

        }
        if($("#edit_address").val()==""){
            $("#mess9").text("联系地址不能为空！");return false;
        }
        $.post("/customer/update", $("#edit_customer_form").serialize(), function (data) {
            if (data == "OK") {
                alert("客户信息更新成功！");
                window.location.reload();
            } else {
                alert("客户信息更新失败！");
                window.location.reload();
            }
        });
    }

    // 删除客户
    function deleteCustomer(id) {
        if (confirm('确实要删除该客户吗?')) {
            $.post("/customer/delete", {"id": id},
                function (data) {
                    if (data == "OK") {
                        alert("客户删除成功！");
                        window.location.reload();
                    } else {
                        alert("删除客户失败！");
                        window.location.reload();
                    }
                });
        }
    }
</script>
</body>
</html>
